<!DOCTYPE html>
<html lang="zh">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <!-- 添加 head 模板 -->
    {{block 'head'}}{{/block}}

    <link rel="stylesheet" href="/public/css/comment.css" />

    <link
      rel="stylesheet"
      type="text/css"
      href="/public/css/lizi/normalize.css"
    />
    <link
      rel="stylesheet"
      type="text/css"
      href="/public/css/lizi/htmleaf-demo.css"
    />
    <link rel="stylesheet" href="/public/css/lizi/style.css" />
  </head>
  <body>
    <header class="header">
      <div class="top">
        <!-- logo区 -->
        <div class="logo">
          <h2><a href="/app">知了</a></h2>
        </div>

        <!-- nav区 -->
        <div class="top-nav">
          <ul>
            <li><a href="/app" class="current index">首页</a></li>
            <li><a href="/post" class="news">新鲜事儿</a></li>
            <li><a href="#">发现</a></li>
            <li><a href="#">等你来答</a></li>
          </ul>
        </div>

        <!-- 搜索区 -->
        <div class="inp">
          <form>
            <input type="text" placeholder="庆祝祖国建党100年" />
            <button type="submit" class="btn"></button>
          </form>
        </div>
        {{if user}}
        <!-- 个人信息 -->
        <div class="person_center">
          <!-- 头像 -->
          <div class="avatar">
            <div class="small_ava">
              <a href="">
                <img src="{{user.avatar}}" alt="" />
              </a>
            </div>
          </div>
          <!-- 下拉菜单 -->
          <div class="person_menu">
            <ul>
              <li style="display: block" class="nickname">
                <a href="#">{{user.nickname}}</a>
              </li>
              <li><a href="#">个人中心</a></li>
              <li><a href="#">设置</a></li>
              <li><a href="/exit" class="exit">退出</a></li>
            </ul>
          </div>
        </div>

        {{else}}
        <!-- 登录 -->
        <div class="top-right">
          <div class="login">
            <a href="/login">登录</a>
          </div>
          <!-- 注册 -->
          <div class="register">
            <a href="/register">注册</a>
          </div>
        </div>

        {{/if}}
      </div>
    </header>

    <!-- 粒子特效 -->
    <div class="container">
      <!-- 模板继承   添加主体内容模板 -->
      {{block 'content'}}
      <div class="t">默认内容</div>
      {{/block}}

      <p class="message">
        Different meetings are different nostalgia, <br />
        different encounters and different tests.
      </p>

      <div class="circle-container">
        <div class="circle"></div>
      </div>
      <div class="circle-container">
        <div class="circle"></div>
      </div>
      <div class="circle-container">
        <div class="circle"></div>
      </div>
      <div class="circle-container">
        <div class="circle"></div>
      </div>
      <div class="circle-container">
        <div class="circle"></div>
      </div>
      <div class="circle-container">
        <div class="circle"></div>
      </div>
      <div class="circle-container">
        <div class="circle"></div>
      </div>
      <div class="circle-container">
        <div class="circle"></div>
      </div>
      <div class="circle-container">
        <div class="circle"></div>
      </div>
      <div class="circle-container">
        <div class="circle"></div>
      </div>
      <div class="circle-container">
        <div class="circle"></div>
      </div>
      <div class="circle-container">
        <div class="circle"></div>
      </div>
      <div class="circle-container">
        <div class="circle"></div>
      </div>
      <div class="circle-container">
        <div class="circle"></div>
      </div>
      <div class="circle-container">
        <div class="circle"></div>
      </div>
      <div class="circle-container">
        <div class="circle"></div>
      </div>
      <div class="circle-container">
        <div class="circle"></div>
      </div>
      <div class="circle-container">
        <div class="circle"></div>
      </div>
      <div class="circle-container">
        <div class="circle"></div>
      </div>
      <div class="circle-container">
        <div class="circle"></div>
      </div>
      <div class="circle-container">
        <div class="circle"></div>
      </div>
      <div class="circle-container">
        <div class="circle"></div>
      </div>
      <div class="circle-container">
        <div class="circle"></div>
      </div>
      <div class="circle-container">
        <div class="circle"></div>
      </div>
      <div class="circle-container">
        <div class="circle"></div>
      </div>
      <div class="circle-container">
        <div class="circle"></div>
      </div>
      <div class="circle-container">
        <div class="circle"></div>
      </div>
      <div class="circle-container">
        <div class="circle"></div>
      </div>
      <div class="circle-container">
        <div class="circle"></div>
      </div>
      <div class="circle-container">
        <div class="circle"></div>
      </div>
      <div class="circle-container">
        <div class="circle"></div>
      </div>
      <div class="circle-container">
        <div class="circle"></div>
      </div>
      <div class="circle-container">
        <div class="circle"></div>
      </div>
      <div class="circle-container">
        <div class="circle"></div>
      </div>
      <div class="circle-container">
        <div class="circle"></div>
      </div>
      <div class="circle-container">
        <div class="circle"></div>
      </div>
      <div class="circle-container">
        <div class="circle"></div>
      </div>
      <div class="circle-container">
        <div class="circle"></div>
      </div>
      <div class="circle-container">
        <div class="circle"></div>
      </div>
      <div class="circle-container">
        <div class="circle"></div>
      </div>
      <div class="circle-container">
        <div class="circle"></div>
      </div>
      <div class="circle-container">
        <div class="circle"></div>
      </div>
      <div class="circle-container">
        <div class="circle"></div>
      </div>
      <div class="circle-container">
        <div class="circle"></div>
      </div>
      <div class="circle-container">
        <div class="circle"></div>
      </div>
      <div class="circle-container">
        <div class="circle"></div>
      </div>
      <div class="circle-container">
        <div class="circle"></div>
      </div>
      <div class="circle-container">
        <div class="circle"></div>
      </div>
      <div class="circle-container">
        <div class="circle"></div>
      </div>
      <div class="circle-container">
        <div class="circle"></div>
      </div>
      <div class="circle-container">
        <div class="circle"></div>
      </div>
      <div class="circle-container">
        <div class="circle"></div>
      </div>
      <div class="circle-container">
        <div class="circle"></div>
      </div>
      <div class="circle-container">
        <div class="circle"></div>
      </div>
      <div class="circle-container">
        <div class="circle"></div>
      </div>
      <div class="circle-container">
        <div class="circle"></div>
      </div>
      <div class="circle-container">
        <div class="circle"></div>
      </div>
      <div class="circle-container">
        <div class="circle"></div>
      </div>
      <div class="circle-container">
        <div class="circle"></div>
      </div>
      <div class="circle-container">
        <div class="circle"></div>
      </div>
      <div class="circle-container">
        <div class="circle"></div>
      </div>
      <div class="circle-container">
        <div class="circle"></div>
      </div>
      <div class="circle-container">
        <div class="circle"></div>
      </div>
      <div class="circle-container">
        <div class="circle"></div>
      </div>
      <div class="circle-container">
        <div class="circle"></div>
      </div>
      <div class="circle-container">
        <div class="circle"></div>
      </div>
      <div class="circle-container">
        <div class="circle"></div>
      </div>
      <div class="circle-container">
        <div class="circle"></div>
      </div>
      <div class="circle-container">
        <div class="circle"></div>
      </div>
      <div class="circle-container">
        <div class="circle"></div>
      </div>
      <div class="circle-container">
        <div class="circle"></div>
      </div>
      <div class="circle-container">
        <div class="circle"></div>
      </div>
      <div class="circle-container">
        <div class="circle"></div>
      </div>
      <div class="circle-container">
        <div class="circle"></div>
      </div>
      <div class="circle-container">
        <div class="circle"></div>
      </div>
      <div class="circle-container">
        <div class="circle"></div>
      </div>
      <div class="circle-container">
        <div class="circle"></div>
      </div>
      <div class="circle-container">
        <div class="circle"></div>
      </div>
      <div class="circle-container">
        <div class="circle"></div>
      </div>
      <div class="circle-container">
        <div class="circle"></div>
      </div>
      <div class="circle-container">
        <div class="circle"></div>
      </div>
      <div class="circle-container">
        <div class="circle"></div>
      </div>
      <div class="circle-container">
        <div class="circle"></div>
      </div>
      <div class="circle-container">
        <div class="circle"></div>
      </div>
      <div class="circle-container">
        <div class="circle"></div>
      </div>
      <div class="circle-container">
        <div class="circle"></div>
      </div>
      <div class="circle-container">
        <div class="circle"></div>
      </div>
      <div class="circle-container">
        <div class="circle"></div>
      </div>
      <div class="circle-container">
        <div class="circle"></div>
      </div>
      <div class="circle-container">
        <div class="circle"></div>
      </div>
      <div class="circle-container">
        <div class="circle"></div>
      </div>
      <div class="circle-container">
        <div class="circle"></div>
      </div>
      <div class="circle-container">
        <div class="circle"></div>
      </div>
      <div class="circle-container">
        <div class="circle"></div>
      </div>
      <div class="circle-container">
        <div class="circle"></div>
      </div>
      <div class="circle-container">
        <div class="circle"></div>
      </div>
      <div class="circle-container">
        <div class="circle"></div>
      </div>
      <div class="circle-container">
        <div class="circle"></div>
      </div>
      <div class="circle-container">
        <div class="circle"></div>
      </div>
      <div class="circle-container">
        <div class="circle"></div>
      </div>
      <div class="circle-container">
        <div class="circle"></div>
      </div>
      <div class="circle-container">
        <div class="circle"></div>
      </div>
      <div class="circle-container">
        <div class="circle"></div>
      </div>
    </div>

    <!-- 底部 -->
    <footer class="footer">
      <!-- 版权中心 -->
      <div class="copyright">
        <div class="first-ul">
          <ul>
            <li><a href="#"> 关于知了 </a>|</li>
            <li><a href="#"> About ZhiLiao </a>|</li>
            <li><a href="#"> 服务协议 </a>|</li>
            <li><a href="#"> 隐私政策 </a>|</li>
            <li><a href="#"> 开放平台 </a>|</li>
            <li><a href="#"> 商务洽谈 </a>|</li>
            <li><a href="#"> 知了招聘 </a>|</li>
            <li><a href="#"> 知了公益 </a>|</li>
            <li><a href="#"> 客服中心 </a>|</li>
            <li><a href="#"> 客户端下载 </a></li>
          </ul>
        </div>

        <div class="second-ul">
          <ul>
            <li><a href="#"> 国家举报中心 </a>|</li>
            <li><a href="#"> 福州公安局 </a>|</li>
            <li><a href="#"> 抵制违法广告承诺书</a></li>
            <li><a href="#"> 侵权投诉指引</a>|</li>
            <li><a href="#">北京互联网法院法律服务工作站</a>|</li>
            <li><a href="#"> 福建通管局</a></li>
          </ul>
        </div>

        <div class="three">
          <span
            >新闻信息服务许可证 粤府新函[2001]87号
            违法和不良信息举报电话：0755-83765566-4 粤公网安备 44030002000001号
          </span>
        </div>

        <div class="four">
          <span>Copyright 2020 - 2021 ZhiLiao. All Rights Reserved</span>
        </div>
      </div>
    </footer>
  </body>

  <!-- script 模板 -->
  {{block 'script'}}{{/block}}
  <script src="../public/js/src/jQuery.js"></script>
  <script>
    $(".person_menu ul").hover(
      function () {
        $(this).children(".nickname").siblings().stop().slideDown(200);
      },
      function () {
        $(this).children(".nickname").siblings().stop().slideUp(200);
      }
    );
  </script>
</html>
